<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 商品状态 操作按钮 搜索 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div v-if="show">
                <el-input v-model="searchTerms" placeholder="订单编号" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info" @click="search">搜索</el-button>
                <el-button @click="show = false">高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="待付款" name="nopay">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="noship">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="已发货" name="shiped">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="已收货" name="received">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="finish">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="closed">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="退款中" name="refunding">
            <div>
                <el-button type="success">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div>
                <el-input v-model="search" placeholder="请输入内容" style="width: 150px;margin-right: 12px;"></el-input>
                <el-button type="info">搜索</el-button>
                <el-button>高级搜索</el-button>
            </div>
        </el-tab-pane>
    </el-tabs>

    <!-- 高级搜索卡片 -->
    <el-card class="box-card" style="margin-top: 20px;" v-if="!show">
        <div slot="header" class="clearfix" style="border-bottom: 1px solid #ebeef5; margin-bottom: 10px;">
            <span>高级搜索</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="show = true">收起</el-button>
        </div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="订单编号">
                <el-input v-model="searchTerms" placeholder="订单编号" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item class="date-range" label="下单时间" style="width: 500px;">
                <el-date-picker v-model="timeRange" :clearable="false" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" @change="transferDateChange"  
                    :picker-options="pickerOptions">
                </el-date-picker>            
            </el-form-item>
            <el-form-item label="收货人">
                <el-input v-model="searchName" placeholder="收货人" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="Tel" placeholder="手机号" style="width: 200px;"></el-input>
            </el-form-item>
            <el-button type="info" @click="search">搜索</el-button>
            <el-button @click="searchTerms = '', timeRange ='', searchName = '', Tel = ''">清空筛选条件</el-button>
        </el-form>
    </el-card>

    <!-- 商品表格 -->
    <el-table :data="orderList" border style="width: 100% ; margin-top: 20px;" ref="multipleTable" tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="45">
        </el-table-column>
        <el-table-column label="商品" width="260">
            <template v-slot="scope">
                <div style="border-bottom: 1px solid #dee2e6;margin-bottom: 10px;">
                    <p>订单编号：<span class="small">{{ scope.row.no }}</span></p>
                    <p>下单时间：<span class="small">{{ scope.row.user.update_time }}</span></p>
                </div>
                <div>
                    <img :src="scope.row.order_items[0].goods_item.cover" alt="">
                    <p style="color: #0056b3;">{{ scope.row.order_items[0].goods_item.title }}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="实付款" width="130" align="center">
            <template v-slot="scope">
                <div>￥{{ scope.row.total_price }}</div>
                <p class="small">(含运费：￥{{ scope.row.order_items[0].goods_item.min_price }})</p>
            </template>
        </el-table-column>
        <el-table-column label="买家" width="130" align="center">
            <template v-slot="scope">
                <div>{{ scope.row.user.username }}</div>
                <p class="small">(用户id：{{ scope.row.user.user_level_id }})</p>
            </template>
        </el-table-column>
        <el-table-column label="支付方式" width="80" align="center">
            <template v-slot="scope">
                <span class="badge">{{ scope.row.reviewed == 1 ? '已支付' : '未支付' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="配送方式" width="80" align="center">
            <template v-slot="scope">
                <span class="badge">{{ scope.row.closed == 1 ? '已配送' : '未配送' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="交易状态" width="160" align="center">
            <template v-slot="scope">
                <p>付款状态：<span class="badge">{{ scope.row.reviewed == 1 ? '已支付' : '未支付' }}</span></p>
                <p>发货状态：<span class="badge">{{ scope.row.closed == 1 ? '已配送' : '未配送' }}</span></p>
                <p>收货状态：<span class="badge">{{ scope.row.closed == 1 ? '已收货' : '未收货' }}</span></p>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <span style="color: #399;">订单详情</span>
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[10, 20, 50, 100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="listnumber">
        </el-pagination>
    </div>
</template>

<script>
import { api_orderList } from '@/common/api/index'
export default {
    data() {
        return {
            activeName: 'all',
            searchTerms: '',
            orderList: [],
            limit: 10,
            tab: 'all',
            page: 1,
            listnumber: 0,
            show: true,
            Tel: '',
            searchName: '',
            date1: '',
            date2: '',
            starttime: '',
            endtime: '',
            timeRange: ''
        }
    },
    methods: {
        async getOrderList() {
            let res = await api_orderList(this.page, this.limit, this.tab, this.searchTerms, this.starttime,this.endtime, this.searchName, this.Tel)
            if (res.data.msg == 'ok') {
                this.orderList = res.data.data.list
                this.listnumber = res.data.data.totalCount
            }

            // this.$axios.get(`http://ceshi5.dishait.cn/admin/order/${this.page}?limit=${this.limit}&tab=${this.tab}&no=${this.searchTerms}&starttime=${this.starttime}&name=${this.searchName}&phone=${this.Tel}`, {
            //     headers: { 'token': this.$store.state.user.token }
            // }).then(res => {

            // })
        },
        handleClick(tab) {
            this.tab = tab.props.name
            this.getOrderList()
        },
        // 更改展示条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.getOrderList()
        },
        // 切换展示页数
        handleCurrentChange(val) {
            this.page = val
            // console.log(`当前页: ${val}`);
            this.getOrderList()
        },
        // 日历
        transferDateChange(val) {
            let date1 = val[0]
            let date2 = val[1]
            this.starttime = `${date1.getFullYear()}-${(date1.getMonth() + 1) < 10 ? '0' + (date1.getMonth() + 1) : (date1.getMonth() + 1)}-${date1.getDate() < 10 ? '0' + date1.getDate() : date1.getDate()}`
            this.endtime =  `${date2.getFullYear()}-${(date2.getMonth() + 1) < 10 ? '0' + (date2.getMonth() + 1) : (date2.getMonth() + 1)}-${date2.getDate() < 10 ? '0' + date2.getDate() : date2.getDate()}`
            // console.log(this.starttime,this.endtime);
        },
        // 搜索
        search() {
            this.getOrderList()
        }
    },
    mounted() {
        this.getOrderList()
    },
}
</script>

<style scoped>
.el-breadcrumb {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 20px;
}

.el-tab-pane {
    display: flex;
    justify-content: space-between;
}

.badge {
    color: #fff;
    background-color: #6c757d;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}

.small {
    font-size: 80%;
    font-weight: 400;
}

img {
    width: 60px;
    height: 60px;
}
</style>